iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
Modern Web

30天入門JavaScript系列 第 9

【Day 9】函式(一):函式 function簡介

  • 分享至 

  • xImage
  •  

個人進度好像比其他同樣寫JS的慢不少(望)


在開始介紹前,先來寫個丟硬幣的程式,可以隨機丟出正面反面

let coin;
coin = Math.floor(Math.random() * 2);
if (coin === 0) {
  console.log('正面');
} else {
  console.log('反面');
}

但如果我們不是要連續丟硬幣(使用迴圈),而是每作一些動作後,丟一次硬幣
則會像下面這樣

let coin;

coin = Math.floor(Math.random() * 2);
if (coin === 0) {
  console.log('正面');
} else {
  console.log('反面');
}
/*
執行些其他的東西~
*/
coin = Math.floor(Math.random() * 2);
if (coin === 0) {
  console.log('正面');
} else {
  console.log('反面');
}
/*
執行些其他的東西~
*/

coin = Math.floor(Math.random() * 2);
if (coin === 0) {
  console.log('正面');
} else {
  console.log('反面');
}

檔案內會充斥大量重複的程式碼,
這時候就要利用函式,把想要重複執行的程式碼包裝起來,
需要的時候再呼叫(call)即可


函式 function

//宣告函式的方式
function 函式名稱(){
  程式碼;
} 
//宣告一個丟硬幣函式
function tossCoin() {
  if (Math.floor(Math.random() * 2) === 1) {
    return '正面';
  } else {
    return '反面';
  }
}

//呼叫函式的方式
函式名稱()


console.log(tossCoin());//呼叫一次    印出 正面 或 反面
console.log(tossCoin());//呼叫第二次  印出 正面 或 反面
console.log(tossCoin());//呼叫第三次  印出 正面 或 反面

像上面,只要宣告好函式之後,隨時都能簡單的呼叫
return關鍵字會把指定的值回傳(輸出)後結束函式。

console.log(tossCoin());

這句話會調用tossCoin()這個函式,依照隨機結果回傳正面或反面,
console.log()則是收到這個回傳後印出來。

函式注意點

先來看以下程式碼

function tossCoin() {
  return Math.floor(Math.random() * 2) === 1 ? '正面' : '反面';
}//其實可以一行解決,上面是故意寫成很多行的

let coin1 = tossCoin();
console.log(coin1); //正面 或 反面

let coin2 = tossCoin;
console.log(coin2); //function tossCoin() {/*略*/}
console.log(coin2());//正面 或 反面

想要使用函式時必須用()來呼叫,
coin1有正確呼叫tossCoin(),會收到函式執行後回傳的內容,
而coin2沒有呼叫,得到內容為整個函式(的記憶體位置)

有沒有呼叫會影響你收到的是函式的回傳結果還是函式本身


函式跟物件是JS最需要懂得部分,這兩個都會花很多天講
明天會談函式的輸入


上一篇
【Day 8】for、while迴圈
下一篇
【Day 10】函式(二):讓函式接受輸入值
系列文
30天入門JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言